import 'package:cached_network_image/cached_network_image.dart';
import 'package:flutter/foundation.dart';
import 'package:flutter/material.dart';
import 'package:flutter_swiper/flutter_swiper.dart';
import 'package:get/get.dart';
import 'package:sp_util/sp_util.dart';
import 'package:yp/Xwidgets/bottom_sheet.dart';
import 'package:yp/config/config.dart';
import 'package:yp/config/style.dart';
import 'package:yp/helper.dart';
import 'package:yp/pages/mall_app/pre_sale/logic.dart';
import 'package:yp/pages/mall_app/pre_sale/state.dart';
import 'package:yp/utils/util.dart';
import 'package:yp/widgets/navigation_bar.dart';
import 'package:fluwx/fluwx.dart' as fluwx;

import '../../../router.dart';

class PreSaleActivePage extends StatefulWidget {
  PreSaleActivePage({Key key}) : super(key: key);

  @override
  _PreSaleActivePageState createState() => _PreSaleActivePageState();
}

class _PreSaleActivePageState extends State<PreSaleActivePage> {
  bool showRule = false;
  PreSaleActiveLogic logic = Get.put(PreSaleActiveLogic());

  @override
  Widget build(BuildContext context) {
    final Size size = MediaQuery.of(context).size;
    return GetBuilder<PreSaleActiveLogic>(
        init: PreSaleActiveLogic(),
        builder: (logic) {
          PreSaleActiveState state = logic.state;
          return Scaffold(
              appBar: YPNavigationBar(
                // Get.find<PreSaleActiveLogic>().state.title,
                logic.state.title,
                backgroundColor: EsColors.Primary,
                titleColor: EsColors.White,
                backBtnColor: const Color(0xffffffff),
                showBack: !kIsWeb,
                actions: kIsWeb
                    ? []
                    : [
                        InkWell(
                          onTap: () {
                            showShareBottomSheet(context);
                          },
                          child: Container(
                            padding: const EdgeInsets.symmetric(horizontal: 10),
                            child: Icon(
                              Icons.share,
                              color: const Color(0xffffffff),
                            ),
                          ),
                        ),
                      ],
                onPressed: () {
                  if (kIsWeb) {
                    Get.offAllNamed(RouteConfig.main);
                  } else {
                    Navigator.of(Get.context).pop();
                  }
                },
              ),
              body: state.seckillItems.length > 0
                  ? Stack(
                      children: [
                        Container(
                          height: size.height,
                          width: size.width,
                          color: const Color(0xfff8f8f8),
                          child: SingleChildScrollView(
                            child: Column(
                              children: [
                                state.slideImages.length > 0
                                    ? Container(
                                        width: size.width,
                                        height: size.width * .4,
                                        color: const Color(0xffffffff),
                                        child: Swiper(
                                          itemBuilder: (BuildContext context,
                                              int index) {
                                            return CachedNetworkImage(
                                              imageUrl:
                                                  state.slideImages[index],
                                              errorWidget:
                                                  (context, url, error) =>
                                                      Icon(Icons.error),
                                              fit: BoxFit.fill,
                                            );
                                          },
                                          itemCount: state.slideImages.length,
                                          viewportFraction: 1,
                                          scale: 1,
                                          // pagination: SwiperPagination(),
                                          // autoplay: true,
                                        ),
                                      )
                                    : SizedBox(),

                                /// 倒计时
                                Container(
                                  width: size.width,
                                  color: const Color(0xffffffff),
                                  padding: const EdgeInsets.symmetric(
                                      horizontal: 15, vertical: 15),
                                  child: Row(
                                    mainAxisAlignment:
                                        MainAxisAlignment.spaceBetween,
                                    children: [
                                      state.activityStatus == 1
                                          ? Text('预售活动未开始',
                                              style: TextStyle(fontSize: 13))
                                          : state.activityStatus == 2
                                              ? Text('距预售结束还有')
                                              : Text('本场预售活动已结束'),
                                      state.activityStatus == 2
                                          ? state.surplusWidget
                                          : state.activityStatus == 1
                                              ? Row(
                                                  children: [
                                                    Text('开始倒计时',
                                                        style: TextStyle(
                                                            fontSize: 12)),
                                                    SizedBox(width: 3),
                                                    state.surplusWidget,
                                                  ],
                                                )
                                              : SizedBox(),
                                    ],
                                  ),
                                ),

                                /// 列表
                                Container(
                                  margin: const EdgeInsets.only(top: 10),
                                  alignment: Alignment.topLeft,
                                  child: Wrap(
                                    alignment: WrapAlignment.start,
                                    children: List.generate(
                                        state.seckillItems.length, (index) {
                                      double _width = (size.width - 45) * .5;
                                      final seckillItem =
                                          state.seckillItems[index];
                                      return Container(
                                        margin: const EdgeInsets.all(10),
                                        child: InkWell(
                                          onTap: () {
                                            if (state.activityStatus == 1) {
                                              toast('预售活动未开始');
                                              return;
                                            } else if (state.activityStatus ==
                                                3) {
                                              toast('预售活动已结束');
                                              return;
                                            }
                                            String itemNumId =
                                                seckillItem['item_num_id']
                                                    .toString();
                                            String styleNumId =
                                                seckillItem['style_num_id']
                                                    .toString();
                                            String ecStyleNumId =
                                                seckillItem['ec_shop_num_id']
                                                    .toString();
                                            Get.toNamed(
                                                RouteConfig.goodsDetail +
                                                    '?itemNumId=$itemNumId&styleNumId=$styleNumId&shopId=${state.shopId}&ecStyleNumId=$ecStyleNumId&typeIndex=1',
                                                arguments: {
                                                  'itemNumId': itemNumId,
                                                  'styleNumId': styleNumId,
                                                  'shopId': state.shopId,
                                                  'ecStyleNumId': ecStyleNumId,
                                                  'typeIndex': 1,
                                                });
                                          },
                                          child: Container(
                                            decoration: BoxDecoration(
                                              color: const Color(0xffffffff),
                                              borderRadius:
                                                  BorderRadius.circular(4),
                                            ),
                                            width: _width,
                                            padding: const EdgeInsets.all(8.0),
                                            child: Column(children: [
                                              Container(
                                                alignment: Alignment.topCenter,
                                                height: _width - 16,
                                                width: _width - 16,
                                                child: CachedNetworkImage(
                                                  imageUrl:
                                                      '${seckillItem['image_default_id']}?x-image-process=image/quality,q_50/imageslim',
                                                  errorWidget:
                                                      (context, url, error) =>
                                                          Icon(Icons.error),
                                                  height: _width - 16,
                                                  width: _width - 16,
                                                  fit: BoxFit.fill,
                                                ),
                                              ),
                                              Container(
                                                alignment: Alignment.centerLeft,
                                                padding: const EdgeInsets.only(
                                                    top: 5, bottom: 5),
                                                child: Text(
                                                  seckillItem['item_title'],
                                                  overflow:
                                                      TextOverflow.ellipsis,
                                                ),
                                              ),
                                              Row(
                                                children: [
                                                  Container(
                                                    padding:
                                                        const EdgeInsets.only(
                                                            top: 1),
                                                    alignment:
                                                        Alignment.topLeft,
                                                    child: Text(
                                                      '预售价:',
                                                      style: TextStyle(
                                                        color: const Color(
                                                            0xff00ab5e),
                                                        fontSize: 12,
                                                      ),
                                                    ),
                                                  ),
                                                  Text(
                                                    '￥${toConstraintLen(seckillItem['seckill_price'], 3)}',
                                                    style: TextStyle(
                                                      color: const Color(
                                                          0xff00ab5e),
                                                      fontSize: 15,
                                                      fontWeight:
                                                          FontWeight.bold,
                                                    ),
                                                  ),
                                                ],
                                              ),
                                              // Row(
                                              //   children: [
                                              //     Text(
                                              //       '￥${toConstraintLen(seckillItem['seckill_price'], 3)}',
                                              //       style: TextStyle(
                                              //         color: const Color(
                                              //             0xff00ab5e),
                                              //         fontSize: 15,
                                              //       ),
                                              //     ),
                                              //     seckillItem['original_price'] !=
                                              //             null
                                              //         ? Container(
                                              //             padding:
                                              //                 const EdgeInsets
                                              //                         .only(
                                              //                     left: 5),
                                              //             child: Text(
                                              //               '￥${toConstraintLen(seckillItem['original_price'], 3)}',
                                              //               style: TextStyle(
                                              //                 color: const Color(
                                              //                     0xff999999),
                                              //                 decoration:
                                              //                     TextDecoration
                                              //                         .lineThrough,
                                              //                 fontSize: 12,
                                              //               ),
                                              //             ),
                                              //           )
                                              //         : SizedBox(),
                                              //   ],
                                              // ),
                                            ]),
                                          ),
                                        ),
                                      );
                                    }),
                                  ),
                                ),
                                state.activityStatus == 2
                                    ? Padding(
                                        padding: const EdgeInsets.only(
                                            top: 5, bottom: 5),
                                        child: Text(
                                          '~我是有底线的~',
                                          style: TextStyle(
                                              color: const Color(0xffdddddd),
                                              fontSize: 12),
                                        ),
                                      )
                                    : SizedBox(),
                              ],
                            ),
                          ),
                        ),
                        state.seckillActivity['ecactivity_desc'] != null
                            ? Positioned(
                                top: 60,
                                right: 0,
                                child: InkWell(
                                  onTap: () {
                                    setState(() {
                                      this.showRule = !this.showRule;
                                    });
                                  },
                                  child: Container(
                                    height: 30,
                                    alignment: Alignment.center,
                                    padding: const EdgeInsets.only(
                                        left: 8, right: 8),
                                    decoration: BoxDecoration(
                                      borderRadius: BorderRadius.only(
                                        topLeft: Radius.circular(15),
                                        bottomLeft: Radius.circular(15),
                                      ),
                                      color: const Color(0xffD8D8D8),
                                    ),
                                    child: Text(
                                      '活动规则',
                                      style: TextStyle(
                                          color: const Color(0xff333333),
                                          fontSize: 14),
                                    ),
                                  ),
                                ),
                              )
                            : SizedBox(),
                        showRule
                            ? Positioned(
                                child: Container(
                                  height: size.height,
                                  width: size.width,
                                  color: Colors.black26,
                                  child: Center(
                                    child: Column(
                                      mainAxisAlignment:
                                          MainAxisAlignment.center,
                                      children: [
                                        Container(
                                          width: size.width * .8,
                                          decoration: BoxDecoration(
                                            borderRadius:
                                                BorderRadius.circular(13),
                                            color: const Color(0xffffffff),
                                          ),
                                          padding: const EdgeInsets.all(20),
                                          child: Column(
                                            crossAxisAlignment:
                                                CrossAxisAlignment.start,
                                            children: [
                                              Container(
                                                alignment: Alignment.topLeft,
                                                decoration: BoxDecoration(
                                                  border: Border(
                                                      bottom: BorderSide(
                                                    color:
                                                        const Color(0xffeeeeee),
                                                  )),
                                                ),
                                                margin: const EdgeInsets.only(
                                                    bottom: 5),
                                                child: Text(
                                                  '活动规则',
                                                  style:
                                                      TextStyle(fontSize: 18),
                                                ),
                                              ),
                                              Text(
                                                state.seckillActivity[
                                                    'ecactivity_desc'],
                                              ),
                                            ],
                                          ),
                                        ),
                                        InkWell(
                                          onTap: () {
                                            setState(() {
                                              this.showRule = !this.showRule;
                                            });
                                          },
                                          child: Container(
                                            padding: const EdgeInsets.all(4),
                                            margin:
                                                const EdgeInsets.only(top: 5),
                                            decoration: BoxDecoration(
                                              border: Border(),
                                              shape: BoxShape.circle,
                                              color: const Color(0xffffffff),
                                            ),
                                            child: Icon(
                                              Icons.close,
                                              color: const Color(0xff333333),
                                            ),
                                          ),
                                        ),
                                      ],
                                    ),
                                  ),
                                ),
                              )
                            : SizedBox(),
                      ],
                    )
                  : Center(
                      child: Text('暂无数据'),
                    ));
        });
  }

  void showShareBottomSheet(BuildContext context) {
    Widget _shareItem(String assetImage, String title) {
      return Column(
        mainAxisSize: MainAxisSize.min,
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          Image(
            image: AssetImage(assetImage),
            width: 50,
            height: 50,
          ),
          SizedBox(width: 20, height: 10),
          Text(
            title,
            style: TextStyle(
              fontSize: 14,
              color: Color(0xff666666),
            ),
          )
        ],
      );
    }

    showModalBottomSheet(
      backgroundColor: Colors.transparent,
      context: context,
      builder: (BuildContext context) {
        return Container(
          height: MediaQuery.of(context).size.height / 3,
          decoration: BoxDecoration(
            color: Colors.white,
            borderRadius: BorderRadius.only(
                topLeft: Radius.circular(10), topRight: Radius.circular(10)),
          ),
          child: Stack(
            children: [
              Align(
                alignment: Alignment.topRight,
                child: GestureDetector(
                  onTap: () {
                    Navigator.of(context).pop();
                  },
                  child: Padding(
                    padding: const EdgeInsets.all(18.0),
                    child: Image(
                      image: AssetImage("assets/images/close.png"),
                      width: 20,
                      height: 20,
                    ),
                  ),
                ),
              ),
              Align(
                alignment: Alignment.center,
                child: Row(
                  mainAxisSize: MainAxisSize.min,
                  children: [
                    GestureDetector(
                        onTap: () {
                          logic.shareToFriend();
                          Navigator.of(context).pop();
                        },
                        child: _shareItem("assets/images/share1.png", "微信好友")),
                    SizedBox(width: 20, height: 20),
                    GestureDetector(
                        onTap: () {
                          logic.shareToWechatCircle();
                          Navigator.of(context).pop();
                        },
                        child: _shareItem("assets/images/share4.png", "朋友圈")),
                  ],
                ),
              ),
            ],
          ),
        );
      },
    );
  }
}
